<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="../common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/admin.css" />
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/loading.js"></script>
<script>
(function($){
 var seting;
 var ct='<table id="div-ct" style="display:none"></table>';// tr container
 var eptFN=function(){};
 var tr_temp;
 var addButton;
 var current_tr;
 var current_values;
 $.fn.edit_table=function(opt){
   ct=$(ct);
   $(document.body).append(ct);   
   opt=opt||{}; 
   seting=opt;
   learn(this);
   init(this);
 }
 
 function init(table)
 {
   // add a row  
   var last_tr=table.find("tr").last();
   addButton=table.find("td .add");
   last_tr.find(".add").click(function(){ 
       if(current_tr)
       {
          $.loading().show({color:"red",text:'请保存正在编辑的数据！'});
          $.loading().fadeOut(1000*3);
          return;
       } 
       current_tr=tr_temp.cloneNode(true)        
       last_tr.before(current_tr);       
       addButton.hide();// hide add button   
   });
   
   // delete a row
   last_tr.find(".delete").click(function(){   
      var cks=$('input[name=id]').filter(function(i){
		  return this.checked
	  });   
	  cks.parents("tr.data_row").remove();	 
   });
   
   attachEditEvent(table)

 } 
 
 // edit event
 function attachEditEvent(target)
 {   
  target.find("td .edit").click(function(){
       var tr=$(this).parents("tr.data_row");
       if(current_tr)
       {
          $.loading().show({color:"red",text:'请保存正在编辑的数据！'});
          $.loading().fadeOut(1000*3);
          return;
       }
       var datas=tr.find("td.data");    
       current_values=[];  
       datas.each(function(){
         var v=this.innerHTML;
         current_values.push(v);
         this.innerHTML='<input type="text" value="'+v+'"/>';         
       });       
       addEditCtrl(datas.last().next().empty());
       tr.addClass("current");      
       current_tr=tr;         
   })
 }
 // cancel event
 function attachCancelEvent(target)
 { 
    
   target.find(".cancel").click(function(){     
     var tr=current_tr instanceof $?current_tr:$(current_tr);    
     if(tr.find("td input[name=id][type=checkbox]").length>0)
     {      
       var i=0;
       tr.find("td.data").each(function(){       
         this.innerHTML=current_values[i];
         i++;
       });
       tr.children().last().empty().append('<span class="action"><a href="#" class="edit">编辑</a></span>');
       attachEditEvent(tr);
     }
     else
     {       
         current_tr.parentNode.removeChild(current_tr)
     }
       
     addButton.show();
     tr.removeClass("current")
     current_tr=null;
     
   })
 
 }
  // save event
 function attachSaveEvent(t)
 {
   t.find(".save").click(function(){
      var tr=current_tr instanceof $?current_tr:$(current_tr);
         tr.find("td.data").each(function(){       
          var mine=$(this)
          mine.text(mine.children("input").first().val());
       }); 
       tr.children().last().empty().append('<span class="action"><a href="#" class="edit">编辑</a></span>');
       attachEditEvent(tr);  
       
       if(tr.find("td input[name=id][type=checkbox]").length==0)
       {
         tr.children().first().append('<input type="checkbox" name="id"/>');
       }
       tr.removeClass("current");
       addButton.show();
       current_tr=null;              
   })
 
 } 

 function learn(table)
 { 
   ct.append($("#category_row").val()); 
   var tds=ct.find("td");
   tds.empty();// 清除内容
   td_data=ct.find(".data");  
   td_data.append('<input type="text"/>');
   addEditCtrl(tds.last());
   tr_temp=ct.find("tr").first();      
   tr_temp.addClass("current")
   tr_temp=tr_temp[0];
 }
 
 function addEditCtrl(td)
 {
    td.append('<input type="button" class="save" value=" 保存 "/><span class="action"></span>').append('<input type="button" class="cancel" value=" 取消 "/>');
    attachCancelEvent(td);
    attachSaveEvent(td);
 }

 
})(jQuery);

$(function(){  
  $("#category").edit_table(); 
});
</script>
</head>
<body>
<form>
<textarea id="category_row" style="display:none">
    <tr class="data_row">		
		<td> <input type="checkbox" name="id"/></td>
		<td class="data"></td>
		<td class="data"></td>	
		<td align="right"></td>	
    </tr>
</textarea>
<table cellspacing="0" cellpadding="4" border="0" width="100%" class="section" id="category">
    <tr class="header_row" >		
		<td width="30px"></td>
		<td><b>分类名称</b></td>
		<td><b>排序</b></td>
		<td width="200px"></td>
    </tr>
<s:iterator value="resultPage.result">
    <tr class="data_row">		
		<td> <input type="checkbox" name="id" id="${id}"/></td>
		<td class="data">${name}</td>
		<td class="data">${seq}</td>	
		<td align="right"><span class="action"><a href="#" class="edit">编辑</a></span></td>	
    </tr>
</s:iterator>
    <tr class="header_row">		
		<td colspan="3"><input type="button" class="delete" value=" 删除 "/></td>
		<td align="right"><input type="button" class="add" value=" 新分类 "/></td>		
    </tr>
</table>
</form>
</body>
</html>